<template>
  <main class="page-nalysis">
    <canopy-check @caonpyChange="change" :value="state.canopyCode"></canopy-check>

    <div class="nav-switch">
      <div class="nav-box">
        <nut-button
          size="mini"
          shape="square"
          :plain="activeName != item.value ? true : false"
          type="info"
          v-for="(item, index) in tabBarArr"
          :key="index"
          @click="tabSwitch(item)"
          >{{ item.title }}</nut-button
        >
      </div>
      <p>{{ activeTime }}</p>
    </div>
    <div class="analysis-content">
      <nut-tag
        plan
        round
        type="primary"
        v-for="(item, index) in state.deviceKeysListData"
        :plain="!(state.nameList.indexOf(item.code) > -1)"
        :key="item.code"
        @click="checkCode(item.code)"
        >{{ item.name }}</nut-tag
      >
    </div>
    <chart
      class="chart"
      chart-class="chart"
      :option="state.option"
      :notMerge="true"
      bindinstance="onInstance"
    />
  </main>
</template>

<script lang="ts" setup>
import { formatDate } from '@/common/util'
import canopyCheck from '@/components/canopyCheck'
import { usePullDownRefresh, useReachBottom } from '@/hooks/life'
import { ref, onMounted, reactive } from 'vue'
import { useDidShow, useTabItemTap, useLoad } from '@tarojs/taro'
import { historyCurveData, deviceKeysList } from '@/services/apis/history'
const state = reactive({
  nameList: [],
  option: {
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 10,
        fillerColor: 'rgba(0, 0, 0, 0.08)',
        dataBackground: {
          lineStyle: {
            color: '#71B504',
            width: 2
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'transparent' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#71B504' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }
    ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} '
      }
    },
    series: []
  },
  canopyCode: '',
  deviceKeysListData: [],
  value1: 0,
  endTime: formatDate(Date.now(), 'Y-M-D'),

  time: formatDate(new Date().getTime() - 24 * 3600 * 1000 * 7, 'Y-M-D')
})
useLoad(option => {
  state.canopyCode = option.id
  init()
})
const change = val => {
  state.canopyCode = val
  init()
}
const init = () => {
  state.nameList = []
  deviceKeysList(state.canopyCode).then(data => {
    state.deviceKeysListData = data.data
    if (state.deviceKeysListData.length > 0) {
      state.nameList.push(state.deviceKeysListData[0].code)
    }
    getData()
  })
}
const handleChange = val => {
  console.log('val', val)
}
const tabBarArr = ref([
  { title: '24小时', value: 1 },
  { title: '近7天', value: 7 },
  { title: '近1月', value: 30 }
])
const activeName = ref('7')
const activeTime = ref(state.time + '～' + state.endTime)
const tabSwitch = (item, index) => {
  activeName.value = item.value
  state.time = formatDate(new Date().getTime() - 24 * 3600 * 1000 * item.value, 'Y-M-D')
  activeTime.value = state.time + '～' + state.endTime
  getData()
}
const checkCode = code => {
  if (state.nameList.indexOf(code) > -1) {
    state.nameList.splice(state.nameList.indexOf(code), 1)
  } else {
    state.nameList.push(code)
  }
  getData()
}
const getData = () => {
  historyCurveData(state.nameList.join(','), state.time, state.endTime).then(data => {
    // state.option = {
    //   tooltip: {
    //     trigger: 'axis'
    //   },
    //   legend: {},
    //   toolbox: {
    //     show: false,
    //     feature: {
    //       dataZoom: {
    //         yAxisIndex: 'none'
    //       },
    //       dataView: { readOnly: false },
    //       magicType: { type: ['line', 'bar'] },
    //       restore: {},
    //       saveAsImage: {}
    //     }
    //   },
    //   dataZoom: [
    //     {
    //       type: 'inside',
    //       start: 0,
    //       end: 100
    //     },
    //     {
    //       start: 0,
    //       end: 10,
    //       fillerColor: 'rgba(0, 0, 0, 0.08)',
    //       dataBackground: {
    //         lineStyle: {
    //           color: '#71B504',
    //           width: 2
    //         },
    //         areaStyle: {
    //           color: {
    //             type: 'linear',
    //             x: 0,
    //             y: 0,
    //             x2: 0,
    //             y2: 1,
    //             colorStops: [
    //               {
    //                 offset: 0,
    //                 color: 'transparent' // 0% 处的颜色
    //               },
    //               {
    //                 offset: 1,
    //                 color: '#71B504' // 100% 处的颜色
    //               }
    //             ],
    //             global: false // 缺省为 false
    //           }
    //         }
    //       },
    //       handleStyle: {
    //         color: '#fff',
    //         shadowBlur: 3,
    //         shadowColor: 'rgba(0, 0, 0, 0.6)',
    //         shadowOffsetX: 2,
    //         shadowOffsetY: 2
    //       }
    //     }
    //   ],
    //   xAxis: {
    //     type: 'category',
    //     boundaryGap: false,
    //     data: []
    //   },
    //   yAxis: {
    //     type: 'value',
    //     axisLabel: {
    //       formatter: '{value}'
    //     }
    //   },
    //   series: []
    // }
    const series = []
    data.series.forEach(item => {
      var item_ = {
        name: item.deviceKeysName,
        type: 'line',
        data: item.data
      }
      series.push(item_)
    })

    state.option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {},
      toolbox: {
        show: false,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 100
        },
        {
          start: 0,
          end: 10,
          fillerColor: 'rgba(0, 0, 0, 0.08)',
          dataBackground: {
            lineStyle: {
              color: '#71B504',
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'transparent' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#71B504' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }
      ],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.xdata
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        }
      },
      series: series
    }
  })
}
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$border-color: #eaeaea;
$border-radius: 6px;
.chart {
  position: relative;
  width: 100vw;
  height: 240px;
  margin-top: 20px;
  margin-left: 10px;
  z-index: 1;
}
.page-nalysis {
  background: #f9f9f9;
  overflow: hidden;
  .nut-cell {
    margin: 0;
    padding: 13px 10px;
    box-shadow: none;
    border-radius: 0;
  }
  .nut-cell__title {
    font-size: $font-size-3;
    color: #000;
  }
  .nut-cell__icon {
    margin-right: 5px;
    border-radius: $border-radius;
    overflow: hidden;
  }
  .nut-icon__img {
    width: 40px;
    height: 40px;
  }
  .nut-cell__value {
    font-size: $font-size-1;
  }
  .nav-switch {
    margin-top: 60px;
    text-align: center;
    .nav-box {
      margin: 0 15px;
      border: 0.5px solid #499d2f;
      border-radius: 6px;
      display: flex;
    }
    .nut-button {
      width: 110px;
      height: 26px;
      border-radius: 6px;
      border: 0;
      flex: 1;
    }
    .nut-button--info {
      background: #499d2f;
    }
    .nut-button--plain {
      background: #fff;
    }
    p {
      padding: 10px;
      font-size: $font-size-1;
      text-align: left;
    }
  }
  .analysis-content {
    padding: 10px 17px;
    background: #fff;
    .nut-tag {
      margin: 3px 3px;
      padding: 2px 10px;
      border-radius: 12px;
    }
    .nut-tag--plain {
      background: #e1e2e8 !important;
      border: 0;
      color: #999999;
    }
    .nut-tag--primary {
      background: #499d2f;
    }
  }
}
</style>
